<!DOCTYPE html><!--固定语句 -->
<html lang="en">
<head> <!--文档描述 -->
    <meta charset="UTF-8"> <!--编码格式 -->
    <title>Title</title> <!--网页名字 -->
    <link rel="stylesheet" type="text/css" href="pz/css/ind.css"><!--加载CSS样式文件-->
    <link rel="stylesheet" type="text/css" href="pz/ziti/font-awesome/css/font-awesome.min.css"><!--加载font字体-->
    <link rel="shortcut icon" type="image/x-icon" href="pz/img/footlogo.png"><!--加载网站图标-->
    <!--加载jquery库-->
    <script src="pz/js/jquery.min.js"></script>
    <!--  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>-->
    <!--加载jquery库-->
    <script type="text/javascript">
        //在当前窗口弹出以一个对话框
        window.alert("欢迎大家学习我们的JavaScript课程，一分耕耘一分收获，希望大家多多练习代码")
        $(function () {
            $('#but').click(function () {
                $('#dv').html("php中文网");
            });
        });
    </script>
    <script type="text/javascript">
        var socket = new WebSocket('ws://localhost:8080');
        socket.onopen = function () {
            console.log('WebSocket连接已建立');

            // 在连接成功后，可以发送消息到后端
            socket.send('Hello from frontend!');
        }

        // 监听WebSocket消息接收事件
        socket.onmessage = function (event) {
            console.log('接收到来自后端的消息: ' + event.data);
            // 在这里可以处理接收到的消息，并根据需要控制Socket发送数据到连接的终端
        }

        // 监听WebSocket连接关闭事件
        socket.onclose = function () {
            console.log('WebSocket连接已关闭');
        }

        // 监听WebSocket连接错误事件
        socket.onerror = function (error) {
            console.error('WebSocket发生错误:', error);
        }

        // 示例：在按钮点击事件中发送消息到后端
        var button = document.getElementById('sendButton');
        button.onclick = function () {
            socket.send('Button clicked!');
        }

    </script>
</head>

<body>

<div id="dv"></div>
<br>
<input type="button" value="按钮" id="but">
<div class="box">
    <div class="box_header"></div>
    <div class="box_top"></div>

</div>
</body>
</html>